import React, {Component} from "react"

import myfetch from '@/atool/home.js'
import './boy.scss'
import {Link} from  'react-router-dom'
import Swiper from  'swiper'

export default class  extends Component{
    constructor(props){
        super(props)
            this.state={
                girlArr:[2],
                girl:[],
                girlArrtwo:[],
                lunbo:[],
                boyArr:[3],
                boy:[],
                boyArrtwo:[],
                changxiaoone:'',
                changxiaotwo:[],
            }
    }
    componentDidMount(){
        myfetch.getgirlarticle(
            (data) => {
                this.setState({
                    girl: data,
                })


                var defeaultArra=[]
                var defeaultArrb=[]
                for (var i=0;i<4;i++){
                    defeaultArra[i]=data[i];
                    this.setState({
                        girlArr: defeaultArra
                    })

                }
                for (var j=0;j<4;j++){
                    defeaultArrb[j]=data[j];
                    this.setState({
                        girlArrtwo: defeaultArrb
                    })

                }

                // console.log('defeaultArr',defeaultArra)

            }
        )

         new Swiper('.swiper-container', {
            autoplay:true,//等同于以下设置
            /*autoplay: {
              delay: 3000,
              stopOnLastSlide: false,
              disableOnInteraction: true,
              },*/
        });

        myfetch.getjingpin((data)=>{
            this.setState({
                lunbo:data
            })
            console.log("this.state.lunbo",this.state.lunbo)
        })


        myfetch.getboyarticle(
            (data) => {
                this.setState({
                    boy: data,
                })
                //console.log("this.state.boy",this.state.boy)

                var defeaultArra=[]
                var defeaultArrb=[]
                for (var i=0;i<4;i++){
                    defeaultArra[i]=data[i];
                    this.setState({
                        boyArr: defeaultArra
                    })

                }
                for (var j=0;j<3;j++){
                    defeaultArrb[j]=data[j];
                    this.setState({
                        boyArrtwo: defeaultArrb
                    })

                }

                // console.log('defeaultArr',defeaultArra)

            }
        )

        myfetch.getchangxiao(
            (data)=>{
                this.setState({
                    changxiaoone:data[0],
                    changxiaotwo:[data[1],data[2],data[3],data[4]]
                })

                console.log('this.state.changxiaoone.',this.state.changxiaotwo)
            }
        )




    }

    changegirlarticle(){
        var jingpinArr = [];

        var testArr = []
        var testArr2 = []
        this.state.girl.map((item, index) => {
            jingpinArr.push(item)
            return(jingpinArr)
        })
        //console.log('jingpinArr',jingpinArr)
        for (var i = 0; i < 4; i++) {
            var num = Math.floor(Math.random() * jingpinArr.length);
            testArr[i] = jingpinArr[num]

            jingpinArr.splice(num, 1);
            this.setState({

                girlArr:testArr
            })
            // console.log('girlArr',this.state.girlArr)
        }
        for (var m= 0; m < 3; m++) {
            var num2 = Math.floor(Math.random() * jingpinArr.length);
            testArr2[m] = jingpinArr[num2]

            jingpinArr.splice(num, 1);
            this.setState({

                girlArrtwo:testArr2
            })
            // console.log('girlArrtwo',this.state.girlArrtwo)
        }
    }

    changeboyarticle(){
        var jingpinArr = [];

        var testArr = []
        var testArr2 = []
        this.state.boy.map((item, index) => {
            jingpinArr.push(item)
            return(jingpinArr)
        })
        //console.log('jingpinArr',jingpinArr)
        for (var n = 0; n < 4; n++) {
            var num = Math.floor(Math.random() * jingpinArr.length);
            testArr[n] = jingpinArr[num]

            jingpinArr.splice(num, 1);
            this.setState({

                boyArr:testArr
            })
            // console.log('girlArr',this.state.girlArr)
        }
        for (var i = 0; i < 3; i++) {
            var num2 = Math.floor(Math.random() * jingpinArr.length);
            testArr2[i] = jingpinArr[num2]

            jingpinArr.splice(num, 1);
            this.setState({

                boyArrtwo:testArr2
            })
            // console.log('girlArrtwo',this.state.girlArrtwo)
        }
    }

    render(){
        return(<div className='girl'>
            <header>
                <Link to='/home' className='spans icon'>&#xe610;</Link>
                <div>男生频道</div>
                <Link to='/home' className='spans icon'>&#xe634;</Link>
            </header>

            <div className='contentgirl'>
                <div className='home_title'>
                    <span></span>
                    <p>主编推荐</p>
                </div>

                <div className='jingpinlist'>
                    <ul>{
                        this.state.girlArr.map((item, index) => {
                            return (<Link to={'/detail/'+item.bid+'/'+item.author} key={index}>
                                <div>    <img src={item.book_cover} alt=""/></div>
                                <span>   {item.bookname}</span>
                                <p> {item.author_name}</p>
                            </Link>)
                        })}

                    </ul>
                </div>
                <div className='girllistbox'>


                    <ul className='girllist2'>

                        {
                            this.state.girlArrtwo.map((item, index) => {
                                return (<Link to={'/detail/'+item.bid+'/'+item.author} key={index}>
                                    <div>
                                        <span className='bookname'>   {item.bookname}</span>
                                        <p>
                                            <span className='stat_name'> {item.stat_name}</span>
                                            <span className='first_cate_name'>   {item.first_cate_name}</span>
                                        </p>
                                    </div>

                                    <span className='introduction'>   {item.introduction}</span>
                                </Link>)
                            })

                        }

                    </ul>
                </div>


                <div className='change' onClick={this.changegirlarticle.bind(this)}>
                    <p>换一换</p>
                    <span></span>
                </div>

                <div className='jingxuanmeiyan'>
                    <span></span>
                    <p>精选美言</p>
                    <span></span>
                </div>

                <div className="swiper-container ">
                    <div className="swiper-wrapper">
                        <ul  className="swiper-slide">
                            {this.state.lunbo.map((item,index)=>{
                                if (index % 3 === 0){
                                    return (<Link to={'/detail/'+item.bid+'/'+item.author} key={index}>
                                        <div>    <img src={item.book_cover} alt=""/></div>
                                        <span>   {item.bookname}</span>
                                        <p> {item.author_name}</p>
                                    </Link>)
                                }
                            })

                            }</ul>
                        <ul  className="swiper-slide">{this.state.lunbo.map((item,index)=>{
                            if (index % 3 ===1){
                                return (<Link to={'/detail/'+item.bid+'/'+item.author} key={index}>
                                    <div>    <img src={item.book_cover} alt=""/></div>
                                    <span>   {item.bookname}</span>
                                    <p> {item.author_name}</p>
                                </Link>)
                            }
                        })

                        }</ul>
                        <ul  className="swiper-slide">
                            {this.state.lunbo.map((item,index)=>{
                                if (index % 3 === 2){
                                    return (<Link to={'/detail/'+item.bid+'/'+item.author} key={index}>
                                        <div>    <img src={item.book_cover} alt=""/></div>
                                        <span>   {item.bookname}</span>
                                        <p> {item.author_name}</p>
                                    </Link>)
                                }
                            })

                            }</ul>
                    </div>

                </div>

                <div className='change' >
                    <p>查看更多</p>
                    <span></span>
                </div>

                <div className='home_title'>
                    <span></span>
                    <p>男生美文</p>
                </div>
                <div className='jingpinlist'>
                    <ul>{
                        this.state.boyArr.map((item, index) => {
                            return (<Link to={'/detail/'+item.bid+'/'+item.author} key={index}>
                                <div>    <img src={item.book_cover} alt=""/></div>
                                <span>   {item.bookname}</span>
                                <p> {item.author_name}</p>
                            </Link>)
                        })}

                    </ul>
                </div>
                <div className='girllistbox'>


                    <ul className='girllist2'>

                        {
                            this.state.boyArrtwo.map((item, index) => {
                                return (<Link to={'/detail/'+item.bid+'/'+item.author} key={index}>
                                    <div>
                                        <span className='bookname'>   {item.bookname}</span>
                                        <p>
                                            <span className='stat_name'> {item.stat_name}</span>
                                            <span className='first_cate_name'>   {item.first_cate_name}</span>
                                        </p>
                                    </div>

                                    <span className='introduction'>   {item.introduction}</span>
                                </Link>)
                            })

                        }

                    </ul>
                </div>
                <div className='change' onClick={this.changeboyarticle.bind(this)}>
                    <p>换一换</p>
                    <span></span>
                </div>


                <div className='home_title'>
                    <span></span>
                    <p>书旗畅销榜</p>
                </div>
                <Link to={'/detail/'+this.state.changxiaoone.bid+'/'+this.state.changxiaoone.author} key={this.state.changxiaoone.bid} className='home_changxiaoone'>
                    <div className='image'><img src={this.state.changxiaoone.book_cover} alt=""/></div>
                    <div className='detail'>
                        <span>{this.state.changxiaoone.bookname}</span>
                        <span>{this.state.changxiaoone.author_name}</span>

                        <p>{this.state.changxiaoone.introduction
                        }</p>
                        <div className='muchspan'>
                            <span>{this.state.changxiaoone.stat_name}</span>
                            <span>{this.state.changxiaoone.first_cate_name}</span>
                            <span>{this.state.changxiaoone.class_name}</span>

                        </div>
                    </div>
                </Link>

                <ul className='home_changxiaotwo'>

                    {this.state.changxiaotwo.map((item,index)=>{
                        return(
                            <Link to={'/detail/'+item.bid+'/'+item.author} key={index}>

                                <div>
                                    <span>{index+1}</span>
                                    <span>{item.bookname}</span>
                                </div>
                                <div>
                                    <span>{item.stat_name}</span>
                                    <span>{item.class_name}</span>
                                </div>

                            </Link>
                        )


                    })}


                </ul>
                <div className='change' >
                    <p>查看更多</p>
                    <span></span>
                </div>

            </div>


        </div>)
    }
}
